<style lang="scss" scoped>
.tv_hot {
}
.avater {
    position: relative;
}
.tv_hot .avater {
    display: block;
    overflow: hidden;
}
.tv_hot .avater img {
}
.avater:after {
    bottom: 0;
    content: url("~@/icons/play_button.png");
    left: 5px;
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 10;
}
</style>
<template>
    <ui-main>
        <div class="pt20 bg-grey">
            <section class="flex row-center mb40">
                <el-button-group>
                    <!-- <el-button class="ui-button-tab" type="primary" @click="$router.push('/cepin')">最新</el-button>
                    <el-button class="ui-button-tab" type="default" @click="tabChange(0)">全部测评</el-button>
                    <el-button class="ui-button-tab" type="default" @click="tabChange(1)">最棒产品</el-button>
                    <el-button class="ui-button-tab" type="default" @click="tabChange(2)">最牛运营</el-button>
                    <el-button class="ui-button-tab" type="default" @click="tabChange(3)">最强硬件</el-button>
                    <el-button class="ui-button-tab" type="default" @click="tabChange(4)">最佳客服</el-button> -->
                    <el-button v-for="(item,i) in tabList" :key="item.title" :type="item.isActive?'primary':'default'" @click="tabChange(i)" class="ui-button-tab">{{item.title}}</el-button>
                </el-button-group>
            </section>
            <!-- 拼图 -->
            <!--  <banner :banner="banner" :imgs="[slice[0],slice[1],slice[2]]" ></banner> -->

            <!-- 分类排行 -->
            <rankList></rankList>

            <!-- 最新视频 -->
            <section>
                <center-title>最新视频</center-title>

                <!-- 视频列表 -->
                <div class="flex flex-wrap row-between">
                    <div @click="link(item.id)" v-for="(item,i) in videoList" class="mb10 bg-white ui-border ui-hover-shadow relative" style="width:305px">
                        <span v-if="item.tag" class="absolute ui-tag-primary ui-tag-anti" style="top:10px;right:10px;z-index:100">{{item.tag}}</span>
                        <div class="tv_hot fl"><ui-img :url="item.cover" style="width:100%;height:200px;" class="avater"></ui-img></div>
                        <div class="flex p20 pb10 ui-border-bottom">
                            <div class="flex-1 ui-border-right pr20 clamp-2 f16 f-bold" style="color:#333;line-height:30px;">{{item.post_title}}</div>
                            <div class="pl20">
                                <div class="f14 f-color-grey">评分</div>
                                <div class="f-color-orange f30">{{parseInt(item.score)}}</div>
                            </div>
                        </div>
                        <div class="p20">
                            <div class="mb20 flex col-center">
                                <span class="ui-tag-primary mr15">优点</span>
                                <span class="flex-1 clamp-1">{{item.change_good}}</span>
                            </div>
                            <div class="flex col-center">
                                <span class="ui-tag-grey mr15">缺点</span>
                                <span class="flex-1 clamp-1">{{item.change_bad}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 测评师观点 -->
            <section>
                <center-title>测评师观点</center-title>
                <div class="flex row-between bg-white">
                    <div v-for="item in viewers" class="p30" style="width:24%">
                        <div class="ui-border-bottom pb10 flex col-center">
                            <ui-img :url="item.avatar" size="40px" class="ui-circle mr10"></ui-img>
                            <span class="f18 f-color-text">测评师: {{item.username}}</span>
                        </div>
                        <div class="pt10">
                            <div class="flex col-center mb10">
                                <ui-img :url="item.company_logo" size="30px"></ui-img>
                                <span class="ml20 f16 f-color-text">{{item.company_name}}</span>
                            </div>
                            <p class="f16">{{item.username}}点评:</p>
                            <div class="f-color-text f14">
                                {{item.change_point}}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 趋势观察 -->
            <pieList></pieList>

            <!-- 广告 -->
            <!-- <section class="flex mt50">
                <ui-img url="http://p3.pstatp.com/large/39a800044bdbdb8c2385" class="flex-1 mr10" style="height:150px"></ui-img>
                <ui-img url="http://p3.pstatp.com/large/39aa0001295d055749b3" class="flex-1 ml10" style="height:150px"></ui-img>
            </section> -->

            <!-- 4D观测 -->
            <fourWatch></fourWatch>
        </div>

    </ui-main>
</template>
<script>
    import pieList from './趋势观察'
    import rankList from './滚动分类排行'
    import centerTitle from './title'
    import fourWatch from './4D观测'
    import banner from '@/views/banner'
    import tabList from './tabList'
    export default {
        components:{
            pieList,
            rankList,
            centerTitle,
            fourWatch,
            banner
        },
        data(){
            return {
                banner:[],
                slice:[],
                videoList:[],
                viewers:[],//测评师观点
                tabList: tabList
            }
        },
        methods:{
            link(id){
                this.$router.push({
                    name:'文章详情',
                    query:{
                        id:id
                    }
                })
            },
            tabChange(index){
                this.$router.push({
                    path:'/cepin-list',
                    query:{
                        tab:index
                    }
                })
            }
        },
        mounted(){
            // banner
            this.$http.get('index.php?g=home&m=Slide&a=slide_banner', {
                params:{
                    cate_id:4
                }
            })
            .then(({data})=>{
                // console.log('banner', data)
                if (data.code==1) {
                    this.banner = data.data
                }
            })
            // 顶部拼图
            this.$http.get('index.php?g=home&m=RecordVideos&a=get_top_banner')
            .then(({data})=>{
                // console.log('顶部拼图', data)
                if (data.code===1) {
                    this.slice = [...data.data.top_banner, ...data.data.reco_banner]
                }
            })

            // 最新视频列表
            this.$http.get('index.php?g=home&m=RecordVideos&a=video_list', {
                params:{
                    page_size:8
                }
            })
            .then(({data})=>{
                console.log('最新视频列表', data)
                if (data.code==1) {
                    this.videoList = data.data
                }
            })

            // 测评师观点
            this.$http.get('index.php?g=home&m=RecordVideos&a=record_list', {
                params:{
                    page_size:4
                }
            })
            .then(({data})=>{
                // console.log('测评师观点',data)
                if (data.code===1) {
                    this.viewers = data.data
                }
            })
        },
    }
</script>
